var Review = function(){
	this.menu_name = 'Review';
}

Review.prototype.Refresh = function(){
	var $container = $('div#review');
	var self = this;
	
	$.each(window.expense, function(key, expense){
		var $item = $container.find('#'+expense._id);
		if($item.length==0){
			$item = self.AddNewItem(expense);
			$item.appendTo($container);
		}
		
		//get all expense purchases
		var purchases = window.purchase.filter(function(purchase){ return purchase.category==expense.name; });
		if(purchases.length==0){
			$item.find('#done div').css({background: '505050'});
			return;
		}
		
		console.log('setting widths for '+expense.name);
		var total_spent = self.TallyPurchases(purchases);
		var total_budget = expense.amount/expense.frequency*30;
		console.log(total_spent);
		console.log(total_budget);
		var percent_spent = (total_spent < total_budget) ? (total_spent/total_budget)*100 : 100;
		console.log(percent_spent);
		console.log($item.find('#done .'+expense.name));
		$item.find('#done div').css({width: String(percent_spent)+'%'});
		$item.find('#not_done div').css({width: String(100-percent_spent)+'%'});
	});
}

//Maybe make this return rather than adding itself? Pure function like
Review.prototype.AddNewItem = function(item){
	var $item = $('<div></div>').attr('id', item._id).css({'width': '80%'});
	$('<h2>'+item.name+'<h2>').appendTo($item);
	$('<div>done</div>').attr('id', 'done').attr('class', item.name).css({background: '#9CFF29', 'float': 'left'}).appendTo($item);
	$('<div>not done</div>').attr('id', 'not_done').css({background: '#6029ee', width: '100%', 'float': 'left', 'border-radius': '10px'}).appendTo($item);
	$('<br />').appendTo($item);
	return $item;
}

Review.prototype.TallyPurchases = function(purchases){
	return purchases
			.map(function(purchase){
				return purchase.amount;
			})
			.reduce(function(a, b){
				return Number(a)+Number(b);
			});
}